<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.5/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.5/themes/icon.css">
	<script type="text/javascript" src="../jquery-easyui-1.5.5.5/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.5.5/jquery.easyui.min.js"></script>
    <script src="../js/jquery.serializejson.min.js"></script>
    <script src="../js/common.js"></script>
</head>
<body>
    

    <div id="tb" style="padding:2px 5px;">
        用户名: <input class="easyui-textbox" style="width:110px" id="searchName">
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" id="searchData">Search</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" id="addData">新增数据</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" id="removesData">批量删除</a>

    </div>
    <div id="dlg" class="easyui-dialog" title="数据操作" data-options="closed:true,iconCls:'icon-save'" style="width:600px;height:400px;padding:10px">
        <form id="ff" method="post">
            <input type="hidden" name="_id" style="width:100%">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'姓名:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="age" style="width:100%" data-options="label:'年龄:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="sex" style="width:100%" data-options="label:'性别:',required:true">
            </div>

        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
    <table id   "></table>
</body>
</html>
<script>
     $('#dg').datagrid({
        url: 'http://localhost:3000/users/list',
        method: 'post',
        pagination:true,
        columns: [[
            { field: 'ck', checkbox: true },
            {field: 'name',title: '姓名', width: 50},
            {field: 'age',title: '年龄', width: 50},
            {field: 'sex',title: '性别', width: 50},
            {field: 'blood',title: '血型', width: 50},
            {field: 'nation',title: '民族', width: 50},
            {field: 'education',title: '学历', width: 50},
            {field: 'marry',title: '婚姻状况', width: 50},
            {field: 'phone',title: '手机号', width: 50},
            {field: 'email',title: '邮箱', width: 50},
            {field: 'address',title: '地址', width: 50},
            {
                field: '_id', title: '用户操作', width: 120,
                formatter: function (value, row, index) {
                    return `<a href="javascript:editData('${row._id}')">修改</a> <a href="javascript:deleData('${row._id}')">删除</a>`;
                }
            }
        ]],
        toolbar: '#tb'
     });
     function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {

                    var formData = $("#ff").serializeJSON();
                    if (formData._id.length > 0) {
                        // 修改操作
                        $.ajax({
                            url: `http://localhost:3000/users/data/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close')
                            $('#dg').datagrid('reload');
                        })
                    } else {
                        // 新增操作
                        delete formData._id;
                        $.ajax({
                            url: 'http://localhost:3000/users/data',
                            type: 'post',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close')
                            $('#dg').datagrid('reload');

                        })
                    }

                }
            }
        });
    };
    function clearForm() {
        $('#ff').form('clear');
    };

    function deleData(id) {
        $.messager.confirm('删除确认框', '你确认要删除该记录码?', function (r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/users/data/${id}`,
                    type: 'delete'
                }).then(res => {
                    $('#dg').datagrid('reload');
                    $.messager.show({
                        title: '提示',
                        msg: '已经成功删除记录.',
                        showType: 'show'
                    });
                })
            }
        });
    };

    function editData(id) {
        $('#ff').form('clear');


        $.ajax({
            url: `http://localhost:3000/users/data/${id}`,
            type: 'get'
        }).then(res => {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        })

    }

    $("#addData").click(function () {
        $('#ff').form('clear');
        $('#dlg').dialog('open')
    })

    $("#searchData").click(function () {
        $('#dg').datagrid({
            url: 'http://localhost:3000/users/list',
            method: 'post',
            queryParams: {
                name: $("#searchName").val()
            }
        });
    });

    $("#removesData").click(function () {
        var dgSelections = $('#dg').datagrid('getSelections');
        var ids = [];
        for (let i = 0; i < dgSelections.length; i++) {
            ids.push(dgSelections[i]._id);
        }


        $.messager.confirm('删除确认框', '你确认要删除该记录码?', function (r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/users/data/removes`,
                    type: 'post',
                    data: {
                        ids: ids.toString()
                    }
                }).then(res => {
                    $('#dg').datagrid('reload');
                    $.messager.show({
                        title: '提示',
                        msg: '已经成功删除记录.',
                        showType: 'show'
                    });
                })
            }
        });

    })
</script>